<template>
  <el-dialog v-model="state.dialogFormVisible" :title="title" width="600px" destroy-on-close>
    <div style="border: 1px solid #ccc">
      <!-- wangEditor结构 -->
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
        @onCreated="handleCreated" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="yes">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, reactive } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { bus } from "../../../utils/mitt.js"
import { ElMessage } from "element-plus"
import { updateCompanyIntroduce, getCompanyIntroduce } from '../../../api/setting'
import { tracking } from '../../../utils/operate'

// 从localstorage获取name
const name = JSON.parse(localStorage.getItem('userinfo') as string).name

const title = ref()
bus.on<string>("editorTitle", async (id) => {
  if (id == 1) {
    valueHtml.value = ''
    title.value = '编辑公司介绍'
    const res = await getCompanyIntroduce('公司介绍')
    valueHtml.value = res.data.data
  
  }
  if (id == 2) {
    valueHtml.value = ''
    title.value = '编辑公司架构'
    const res = await getCompanyIntroduce('公司架构')
    valueHtml.value = res.data.data
    
  }
  if (id == 3) {
    valueHtml.value = ''
    title.value = '编辑公司战略'
    const res = await getCompanyIntroduce('公司战略')
    valueHtml.value = res.data.data
  }
  if (id == 4) {
    valueHtml.value = ''
    title.value = '编辑公司高层'
    const res = await getCompanyIntroduce('公司高层')
    valueHtml.value = res.data.data
  }
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// mode
const mode = ref('default')
// 内容 HTML
const valueHtml = ref()
// 工具栏
const toolbarConfig = {
  excludeKeys: [] as string[]
}
// 上传图片，修改 uploadImage 菜单配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      //上传图片配置
      server: 'http://127.0.0.1:3007/set/uploadCompanyPicture', //上传接口地址
      fieldName: 'file', //上传文件名
      methods: 'post',
      metaWithUrl: true, // 参数拼接到 url 上
      // 单个文件上传成功之后
      // onSuccess(file, res) {
      // },
      // 自定义插入图片
      customInsert(res, insertFn) {
        insertFn(res.url)
      },
    },
  }
}

// 排除菜单组，写菜单组 key 的值即可
toolbarConfig.excludeKeys = [
  'blockquote',
  'bgColor',
  'color',
  'group-more-style',
  'fontFamily',
  'bulletedList',
  'numberedList',
  'lineHeight',
  'todo',
  'emotion',
  'insertLink',
  'group-video',
  'insertTable',
  'codeBlock',
  'divider',
  'fullScreen'
]
// 点击确认 修改文案
const yes = async () => {
  // 去除 编辑两个字
  // console.log(title.value.slice(-4))
  // 两个参数 set_text set_name
  const res = await updateCompanyIntroduce(valueHtml.value, title.value.slice(-4))
  if (res.data.status == 0) {
    ElMessage({
      message: '修改公司介绍成功！',
      type: 'success',
    })
    tracking("系统设置", "修改公司介绍", name, "中级")
    state.dialogFormVisible = false
    valueHtml.value = ''
  } else {
    state.dialogFormVisible = false
    valueHtml.value = ''
    ElMessage.error('修改公司介绍失败，请检查网络是否通畅！')
  }
}


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
const state = reactive({
  dialogFormVisible: false,
});

// 取消删除
const cancel = () => {
  state.dialogFormVisible = false;
};

// 暴露open方法
const open = () => {
  state.dialogFormVisible = true;
};
defineExpose({
  open,
});

// 取消订阅/监听
onBeforeUnmount(() => {
  bus.all.clear()
})
</script>

<style lang="scss" scoped></style>